<template>
	<transition name="move">
		<div class="food-container" v-show="flag" ref="foodBox">
			<div class="content">
				<div class="pic-header">
					<img :src="food.image" alt="" />
					<div class="back" @click="_back">
						<i class="icon-arrow_lift"></i>
					</div>
				</div>
				<div class="food-main">
					<h1 class="title">{{food.name}}</h1>
					<div class="detail">
						<span class="sell-count">月售{{food.sellCount}}份</span>
						<span class="rating">好评率{{food.rating}}%</span>
					</div>
					<div class="price">
						<span class="now">￥{{food.price}}</span>
						<span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
					</div>
					<div class="cartcontrol-wrapper">
						<v-cartcontrol :food="food" @acrt-add="_parentDrop"></v-cartcontrol>
					</div>
					<transition name="fade">
						<div class="add-shopcart" v-show="!food.count || food.count === 0" @click="addShopCart">加入购物车</div>
					</transition>
				</div>
				<v-split v-show="food.info"></v-split>
				<div class="info" v-show="food.info">
					<div class="title">商品信息</div>
					<div class="text">{{food.info}}</div>
				</div>
				<v-split v-show="food.info"></v-split>
				<div class="rating">
					<div class="title">商品评价</div>
					<v-ratingselect :ratings="food.ratings" :select-type="selectType" :only-content="onlyContent" :desc="desc" @on-select-type="_selectType" @on-only-content="_onlyContent"></v-ratingselect>
					<div class="rating-wrapper">
						<ul v-if="food.ratings && food.ratings.length">
							<li class="rating-item border-1px" v-show="_itemIsShow(rating.rateType, rating.text)" v-for="(rating, index) in food.ratings" :key="index">
								<div class="user">
									<span class="name">{{rating.username}}</span>
									<img class="avatar" :src="rating.avatar" width="12" height="12" alt="" />
								</div>
								<div class="time">{{rating.rateTime | ratingFormatDate}}</div>
								<div class="text"><i :class="{'icon-thumb_up': rating.rateType===0, 'icon-thumb_down': rating.rateType===1}"></i>{{rating.text}}</div>
							</li>
						</ul>
						<div class="empty" v-if="!food.ratings || !food.ratings.length">暂无评价</div>
					</div>
				</div>
			</div>
		</div>
	</transition>
</template>
<script type="text/ecmascript">
import { formatDate } from '@/common/js/utils.js';
import BScroll from 'better-scroll';
import CartControl from '@/components/cartcontrol';
import Split from '@/components/split';
import RatingSelect from '@/components/ratingselect';
import Vue from 'vue';

// const POSITIVE = 0;
// const NAGETIVE = 1;
const ALL = 2;

export default {
	components: {
		'v-cartcontrol': CartControl,
		'v-split': Split,
		'v-ratingselect': RatingSelect
	},
  props: {
		food: {
			type: Object
		}
  },
  data () {
		return {
			flag: false,
			selectType: ALL,
			onlyContent: false,
			desc: {
				all: '全部',
				positive: '推荐',
				negative: '吐槽'
			}
		};
	},
	methods: {
		show () {
			this.flag = true;
			if (!this.scroll) {
				this.scroll = new BScroll(this.$refs.foodBox, {
					click: true
				});
			} else {
				this.scroll.refresh();
			}
		},
		_back () {
			this.flag = false;
		},
		addShopCart (event) {
			if (!this.food.count) {
				Vue.set(this.food, 'count', 1);
			}
			this.$emit('cart-add', event.target);
		},
		_parentDrop (target) {
			this.$emit('cart-add', target);
		},
		_selectType (type) {
			this.selectType = type;
			this.$nextTick(() => {
				this.scroll.refresh();
			});
		},
		_onlyContent (bool) {
			this.onlyContent = bool;
			this.$nextTick(() => {
				this.scroll.refresh();
			});
		},
		_itemIsShow (type, text) {
			if (this.onlyContent && !text) {
				return false;
			}
			if (this.selectType === ALL) {
				return true;
			} else {
				return type === this.selectType;
			}
		}
	},
	filters: {
		ratingFormatDate (time) {
			let date = new Date(time);
			return formatDate(date, 'yyyy-MM-dd hh:mm');
		}
	}
};
</script>

<style lang="less" scoped>
@import './res/style.less';
</style>
